import {FontIcon, Static} from '../components'
import {compose} from '../util'
import {withState} from 'recompose'
import {primaryColor} from '../styles/common-color'

// type shadePropsType = { state: { show: boolean, zoom: boolean }, setState: Function, title: string, label: string, icon: string }

const Shade = ({state: {show, zoom}, setState, title,icon,label}) => (
    <div className='icon-zoom'
         onMouseOver={() => setState({show: true, zoom: true})}
         onMouseLeave={() => setState({show: false, zoom: false})}
    >
        <FontIcon icon={icon} fontSize='6rem' color={primaryColor}/>
        {!show && <Static label={title} fontSize='1.25rem'/>}
        {
            zoom &&
            <div className='title-box'>
                <Static label={label} color='#fff' fontSize='1.35rem'/>
            </div>
        }

        <style jsx>{`
            .icon-zoom{
                width: 16rem;
                height: 18rem;
                position: relative;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-direction: column;
                border:1px solid #f5f5f5;
                padding:2rem 0;
            }

            .title-box{
                width:14rem;
                height:2rem;
                position:absolute;
                left: 50%;
                top: 50%;
                margin-left: -7rem;
                margin-top:-1rem;
                z-index:3;
                text-align:center;
            }

            .icon-zoom:before,.icon-zoom:after{
                content: "";
                width: 0;
                height: 100%;
                background: rgba(25, 25, 25, 0.6);
                position: absolute;
                top: 0%;
                left: 50%;
                transition: all 1s;
            }
            .icon-zoom:hover:before{
                left: 0%;
                width: 50%;
            }
            .icon-zoom:hover:after{
                left: 50%;
                width: 50%;
            }
        `}</style>
    </div>
)

export default compose(
    withState('state', 'setState', {
        show: false,
        zoom: false
    })
)(Shade)
